<template>
  <div>
    <a-drawer
      title="医院表单信息"
      :width="520"
      @close="closeDrawer"
      :visible="setting.visible"
      :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
    >
      <div>
        <a-form :form="tenantForm" layout="vertical" hideRequiredMark>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="医院名称">
                <a-input :value="tenantForm.hospital.name" disabled="disabled"/>
              </a-form-item>
            </a-col>
            <!-- <a-col :span="12">
              <a-form-item label="科室">
                <a-input :value="tenantForm.keshi" disabled="disabled"/>
              </a-form-item>
            </a-col> -->
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="医护数量">
                <a-input :value="tenantForm.hospital.staffCount" disabled="disabled"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="医院所在地址">
                <a-input :value="tenantForm.hospital.detailedAddress" disabled="disabled"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="是否可直接接收物资">
                <a-radio-group :value="tenantForm.hospital.directAccept">
                  <a-radio :value="1" disabled="disabled">是</a-radio>
                  <a-radio :value="2" disabled="disabled">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item label="医院联系人">
                <a-table
                  :columns="hospitalcolumns"
                  :dataSource="tenantForm.contacts"
                  rowKey="id"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item label="物资需求列表">
                <a-table
                  :columns="materialcolumns"
                  :dataSource="tenantForm.materialDemands"
                  rowKey="id"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-button :style="{marginRight: '8px'}" @click="closeDrawer">
          返回
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
// import api.
import { selectApproval } from '@/api/VolunteerApproval'
import Notification from '@/utils/notification'

const hospitalcolumns = [
  {
    title: '姓名',
    dataIndex: 'volunteerName',
    width: '100px',
    scopedSlots: { customRender: 'volunteerName' }
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    width: '100px',
    scopedSlots: { customRender: 'phone' }
  },
  {
    title: '联系微信',
    dataIndex: 'wechat',
    width: '100px',
    scopedSlots: { customRender: 'wechat' }
  }
]

const materialcolumns = [
  {
    title: '物资名称',
    dataIndex: 'demandName',
    width: '100px',
    scopedSlots: { customRender: 'demandName' }
  },
  {
    title: '数量',
    dataIndex: 'quantity',
    width: '100px',
    scopedSlots: { customRender: 'quantity' }
  },
  {
    title: '单位',
    dataIndex: 'unit',
    width: '100px',
    scopedSlots: { customRender: 'unit' }
  },
  {
    title: '紧急情况',
    dataIndex: 'level',
    width: '100px',
    scopedSlots: { customRender: 'level' }
  }
]

export default {
  // name: 'Detail',
  components: {},
  data () {
    return {
      setting: {
        visible: false,
        hospitalId: 0,
        action: 'edit'
      },
      materialcolumns: materialcolumns,
      materialData: [],
      hospitalData: [],
      tenantForm: {},
      queryParam: {},
      // hospitalRelateList: [],
      hospitalcolumns: hospitalcolumns,
      pagination: {},
      loading: false,
      // hospitals: [],
      form: this.$form.createForm(this),
      notification: new Notification(this.$notification)
    }
  },
  created () {},
  mounted () {
    // this.fetchData()
  },
  methods: {
    openDrawer (record) {
      console.log('id:', record)
      this.setting.visible = true
      this.setting.hospitalId = record
      this.fetchDataById(record)
      this.tenantForm = {}
    },
    closeDrawer () {
      this.setting.visible = false
    },
    fetchDataById (id) {
      console.log('id:', id)
      this.loading = true
      selectApproval(id).then(response => {
        console.log('fetchDataById:', response)
        this.tenantForm = response
        this.loading = false
      }).catch(context => {
        this.loading = false
        this.notification.httpError(`加载医院数据！`, context.response)
      })
    }
  }
}
</script>
